<template>
  <div class="common-layout">
    <el-container class="box">
      <!-- 左侧菜单栏 -->
      <el-aside class="el-aside" :class="{ 'collapsed': isCollapsed }">
        <div class="sidebar-header">
          <div class="logo-container">
            <div class="logo-full" v-show="!isCollapsed">
              <div class="logo-icon">🏢</div>
              <span class="logo-text">旅行社后台</span>
            </div>
            <div class="logo-collapsed" v-show="isCollapsed">
              <span class="logo-mini">🏢</span>
            </div>
          </div>
          <button class="collapse-btn" @click="toggleCollapse">
            <svg class="collapse-icon" :class="{ 'rotated': isCollapsed }" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M15 18L9 12L15 6"/>
            </svg>
          </button>
        </div>
        
        <nav class="sidebar-nav">
          <!-- 特殊菜单项 - 旅行社主页 -->
          <div class="premium-section">
            <router-link to="/agencyframe/agencymain" class="premium-link">
              <div class="premium-icon">🏠</div>
              <span v-show="!isCollapsed">旅行社主页</span>
              <div class="premium-arrow" v-show="!isCollapsed">→</div>
            </router-link>
          </div>

          <!-- 基本信息管理 -->
          <div class="sidebar-section" v-if="agencyStatus === '通过'">
            <div class="section-header" @click="toggleSection('basic')" :class="{ active: sections.basic.isOpen }">
              <div class="section-icon">📋</div>
              <span class="section-title" v-show="!isCollapsed">基本信息管理</span>
              <div class="expand-icon" v-show="!isCollapsed" :class="{ rotated: sections.basic.isOpen }">
                <svg viewBox="0 0 24 24" width="14" height="14">
                  <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
                </svg>
              </div>
            </div>
            <div class="section-content" :class="{ expanded: sections.basic.isOpen }" v-show="!isCollapsed || sections.basic.isOpen">
              <div class="content-wrapper" v-show="!isCollapsed || sections.basic.isOpen">
                <div class="menu-item">
                  <router-link to="/agencyframe/grouptourpost" class="menu-link">
                    <div class="menu-icon">📝</div>
                    <span>发起跟团游</span>
                  </router-link>
                </div>
                <div class="menu-item">
                  <router-link to="/agencyframe/grouptoursend" class="menu-link">
                    <div class="menu-icon">📢</div>
                    <span>发布的跟团游</span>
                  </router-link>
                </div>
              </div>
            </div>
          </div>

          <!-- 报名管理 -->
          <div class="premium-section" v-if="agencyStatus === '通过'">
            <router-link to="/agencyframe/reglist" class="premium-link">
              <div class="premium-icon">👥</div>
              <span v-show="!isCollapsed">报名管理</span>
              <div class="premium-arrow" v-show="!isCollapsed">→</div>
            </router-link>
          </div>

          <!-- 状态提示 -->
          <div class="status-notice" v-if="agencyStatus !== '通过'">
            <div class="notice-content">
              <el-icon class="notice-icon" :class="agencyStatus === '未通过' ? 'error' : 'warning'">
                <component :is="agencyStatus === '未通过' ? 'CircleCloseFilled' : 'WarningFilled'" />
              </el-icon>
              <span v-show="!isCollapsed" class="notice-text">
                {{ agencyStatus === '未通过' ? '审核未通过' : '等待审核中' }}
              </span>
            </div>
          </div>
        </nav>
      </el-aside>
      
      <el-container direction="vertical" class="main-container">
        <!-- 顶部Header -->
        <el-header class="main-header">
          <div class="header-container">
            <!-- 左侧菜单按钮 -->
            <div class="header-left">
              <el-button 
                type="primary"
                @click="toggleCollapse" 
                class="menu-toggle-btn"
              >
                <span class="btn-icon">≡</span>
              </el-button>
              <el-button 
                type="primary"
                @click="goHome" 
                class="home-btn"
              >
                <span class="btn-icon">🏠</span>
                <span>首页</span>
              </el-button>
            </div>
            
            <!-- 中间标题 -->
            <div class="header-center">
              <h1 class="app-title">
                <span class="title-icon">⛰️</span>
                山行者
              </h1>
            </div>
            
            <!-- 个人中心（右） -->
            <div class="header-right">
              <el-dropdown>
                <div class="user-profile">
                  <div class="user-avatar">
                    <div class="avatar-frame">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"/>
                        <circle cx="12" cy="7" r="4"/>
                      </svg>
                    </div>
                    <div class="status-indicator"></div>
                  </div>
                  <span class="user-name">用户中心</span>
                  <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="6,9 12,15 18,9"/>
                  </svg>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="exitLogin">
                      <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9"/>
                        <polyline points="16,17 21,12 16,7"/>
                        <line x1="21" y1="12" x2="9" y2="12"/>
                      </svg>
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <!-- 主体模块 -->
        <el-main class="main-content">
          <div class="content-wrapper">
            <div class="page-container">
              <!-- 页面标题 -->
              <div class="page-header">
                <div class="page-title">
                  <div class="title-icon-wrapper">
                    <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"/>
                      <polyline points="9,22 9,12 15,12 15,22"/>
                    </svg>
                  </div>
                  <h2>{{ getTabTitle(activeTabName) }}</h2>
                </div>
              </div>
              
              <!-- 路由视图容器 -->
              <div class="page-content">
                <router-view @agency-status-update="handleStatusUpdate"></router-view>
              </div>
            </div>
            
            <!-- 底部Footer -->
            <footer class="main-footer">
              <div class="footer-container">
                <div class="footer-content">
                  <div class="footer-section">
                    <h3>关于我们</h3>
                    <ul>
                      <li><a href="#">公司简介</a></li>
                      <li><a href="#">联系我们</a></li>
                      <li><a href="#">加入我们</a></li>
                    </ul>
                  </div>
                  <div class="footer-section">
                    <h3>帮助中心</h3>
                    <ul>
                      <li><a href="#">常见问题</a></li>
                      <li><a href="#">使用指南</a></li>
                      <li><a href="#">意见反馈</a></li>
                    </ul>
                  </div>
                  <div class="footer-section">
                    <h3>合作伙伴</h3>
                    <ul>
                      <li><a href="#">旅行社加盟</a></li>
                      <li><a href="#">景区合作</a></li>
                      <li><a href="#">商务合作</a></li>
                    </ul>
                  </div>
                </div>
                <div class="footer-bottom">
                  <p>© 2023 山行者 版权所有 | 备案号：京ICP备XXXXXXXX号</p>
                </div>
              </div>
            </footer>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, watch, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessageBox, ElMessage } from "element-plus";
import { CircleCloseFilled, WarningFilled } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const isCollapsed = ref(false);
const agencyStatus = ref(''); // 旅行社状态

const sections = reactive({
  basic: { isOpen: false }
});

const goHome = () => {
  router.push('/');
};

// 让activeTabName跟随路由
const activeTabName = ref(route.path);
watch(
  () => route.path,
  (newPath) => {
    activeTabName.value = newPath;
    // 检查路由权限
    checkRoutePermission(newPath);
  }
);

// 检查路由权限
const checkRoutePermission = (path) => {
  if (agencyStatus.value !== '通过' && !path.startsWith('/agencyframe/agencymain')) {
    ElMessage.warning('当前账号未通过审核，只能访问主页');
    router.push('/agencyframe/agencymain');
  }
};


const getTabTitle = (index) => {
  const menuItems = [
    { index: '/agencyframe/agencymain', title: '旅行社主页' },
    { index: '/agencyframe/grouptourpost', title: '发起跟团游' },
    { index: '/agencyframe/grouptoursend', title: '发布的跟团游' },
    { index: '/agencyframe/reglist', title: '报名管理' }
  ];
  const item = menuItems.find(item => item.index === index);
  return item ? item.title : '跟团游状态编辑';
};

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const toggleSection = (sectionKey) => {
  sections[sectionKey].isOpen = !sections[sectionKey].isOpen;
};

const exitLogin = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    router.push('/loginpage');
  }).catch(() => {});
};

// 初始化时获取旅行社状态
onMounted(async () => {
  try {
    const loginId = localStorage.getItem('loginId');
    if (!loginId) {
      router.push('/loginpage');
      return;
    }
    
    const response = await fetch(`http://localhost:8080/mw/travelAgency/byLoginId/${loginId}`);
    if (response.ok) {
      const data = await response.json();
      agencyStatus.value = data.auditStatus || '未审核';
      checkRoutePermission(route.path);
    }
  } catch (error) {
    console.error('获取旅行社状态失败:', error);
  }
});
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 全局样式 */
.common-layout {
  background: linear-gradient(135deg, #f3f1f6 0%, #e8e5f0 100%);
  height: 100vh;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.box {
  height: 100%;
  position: relative;
}

/* 侧边栏样式 */
.el-aside {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(139, 92, 246, 0.2);
  transition: transform 0.3s ease, width 0.3s ease;
  z-index: 1000;
  overflow: hidden;
  box-shadow: 4px 0 20px rgba(139, 92, 246, 0.1);
}

.el-aside.collapsed {
  width: 80px;
  overflow: visible;
  box-shadow: 2px 0 10px rgba(139, 92, 246, 0.05);
}

/* 侧边栏头部 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(168, 85, 247, 0.05));
  position: relative;
}

.logo-container {
  flex: 1;
  overflow: hidden;
}

.logo-full {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.logo-collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.logo-icon {
  font-size: 24px;
  color: #8b5cf6;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #4c1d95;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

.logo-mini {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.collapse-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8b5cf6;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.collapse-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  transform: scale(1.05);
}

.collapse-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.collapse-icon.rotated {
  transform: rotate(180deg);
}

/* 导航菜单 */
.sidebar-nav {
  padding: 20px 15px;
  overflow-y: auto;
  height: calc(100vh - 80px);
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 2px;
}

.sidebar-section {
  margin: 12px 0;
}

.premium-section {
  margin: 15px 0;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  border-radius: 12px;
  padding: 2px;
  position: relative;
}

.premium-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: white;
  border-radius: 10px;
  text-decoration: none;
  color: #4c1d95;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.premium-link:hover {
  background: rgba(139, 92, 246, 0.05);
  color: #8b5cf6;
  transform: translateY(-1px);
}

.premium-icon {
  font-size: 18px;
  color: #8b5cf6;
  min-width: 24px;
  display: flex;
  justify-content: center;
}

.premium-arrow {
  margin-left: auto;
  font-size: 16px;
  color: #a1a1aa;
  transition: all 0.3s ease;
}

.premium-link:hover .premium-arrow {
  color: #8b5cf6;
  transform: translateX(3px);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #6b46c1;
  font-weight: 500;
  border-radius: 10px;
  position: relative;
}

.section-header:hover {
  background: rgba(139, 92, 246, 0.08);
  color: #4c1d95;
}

.section-header.active {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  border-left: 3px solid #8b5cf6;
}

.section-icon {
  font-size: 16px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.section-title {
  flex: 1;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expand-icon {
  color: #a1a1aa;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.expand-icon.rotated {
  transform: rotate(90deg);
  color: #8b5cf6;
}

.expand-icon svg {
  fill: currentColor;
}

.section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.section-content.expanded {
  max-height: 200px;
}

.content-wrapper {
  padding: 8px 0 16px 0;
}

.menu-item {
  margin: 2px 0;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 40px;
  text-decoration: none;
  color: #7c3aed;
  font-size: 14px;
  transition: all 0.3s ease;
  border-radius: 8px;
  position: relative;
}

.menu-link:hover {
  background: rgba(139, 92, 246, 0.06);
  color: #6b21a8;
  transform: translateX(2px);
}

.link-indicator {
  width: 4px;
  height: 4px;
  background: #c4b5fd;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.menu-link:hover .link-indicator {
  background: #8b5cf6;
  transform: scale(1.5);
}

/* 主容器 */
.main-container {
  margin-left: 300px;
  transition: margin-left 0.3s ease;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-aside.collapsed ~ .main-container {
  margin-left: 80px;
}

/* Header */
.main-header {
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 20px rgba(139, 92, 246, 0.1);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-left,
.header-right {
  flex: 1;
}

.header-left {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.header-right {
  display: flex;
  justify-content: flex-end;
}

.header-center {
  flex: 0 0 auto;
}

.menu-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c4b5fd 0%, #a855f7 100%);
  border: none;
  color: #ffffff;
  font-weight: 500;
  height: 40px;
  width: 40px;
  padding: 0;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.menu-toggle-btn:hover {
  background: linear-gradient(135deg, #c4b5fd 0%, #9333ea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.home-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #c4b5fd 0%, #a855f7 100%);
  border: none;
  color: #ffffff;
  font-weight: 500;
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.home-btn:hover {
  background: linear-gradient(135deg, #c4b5fd 0%, #9333ea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.btn-icon {
  font-size: 16px;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.5px;
}

.title-icon {
  font-size: 28px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.user-profile:hover {
  background: rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
}

.user-avatar {
  position: relative;
}

.avatar-frame {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  position: relative;
}

.avatar-frame svg {
  width: 20px;
  height: 20px;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid white;
  border-radius: 50%;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #4c1d95;
}

.dropdown-arrow {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f1f6 0%, #e8e5f0 100%);
}

.content-wrapper {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.page-container {
  flex: 1;
  padding: 30px;
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.title-icon {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.page-title h2 {
  font-size: 28px;
  font-weight: 600;
  color: #4c1d95;
  margin: 0;
  letter-spacing: -0.5px;
}

.page-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  min-height: 500px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

/* Footer */
.main-footer {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  margin-top: auto;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 30px 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 40px;
}

.footer-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #4c1d95;
  margin-bottom: 16px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  margin-bottom: 10px;
}

.footer-section a {
  color: #7c3aed;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.footer-section a:hover {
  color: #8b5cf6;
  transform: translateX(2px);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.footer-bottom p {
  color: #a855f7;
  font-size: 14px;
  margin: 0;
}

/* 响应式 */
@media (max-width: 992px) {
  .el-aside {
    transform: translateX(-100%);
    z-index: 1001;
  }
  
  .el-aside.collapsed {
    transform: translateX(0);
    width: 80px;
  }
  
  .main-container {
    margin-left: 0 !important;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 30px;
  }
  
  .header-container {
    padding: 0 20px;
  }
  
  .page-container {
    padding: 20px;
  }
  
  .app-title {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .el-aside:not(.collapsed) {
    width: 100%;
    max-width: 300px;
  }
  
  .home-btn span:last-child {
    display: none;
  }
  
  .home-btn {
    padding: 0 10px;
    width: 40px;
  }
}

/* Element Plus 组件覆盖 */
.el-dropdown-menu {
  border: 1px solid rgba(139, 92, 246, 0.2);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6b46c1;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.el-dropdown-menu__item:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.el-aside.collapsed .premium-link span,
.el-aside.collapsed .premium-link .premium-arrow,
.el-aside.collapsed .section-title,
.el-aside.collapsed .expand-icon,
.el-aside.collapsed .section-header .expand-icon {
  display: none !important;
}

.el-aside.collapsed .premium-icon,
.el-aside.collapsed .section-icon,
.el-aside.collapsed .logo-mini,
.el-aside.collapsed .logo-collapsed {
  opacity: 1 !important;
  color: #8b5cf6 !important;
  filter: none !important;
}

.el-aside.collapsed .premium-link,
.el-aside.collapsed .section-header {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}

.el-aside.collapsed .premium-link,
.el-aside.collapsed .section-header {
  min-width: 48px;
  min-height: 48px;
}

.el-aside.collapsed .logo-collapsed {
  display: flex !important;
}

.el-aside.collapsed .logo-full {
  display: none !important;
}

/* 修正：收缩时二级菜单内容可见 */
.el-aside.collapsed .section-content.expanded {
  max-height: 200px !important;
  overflow: visible !important;
  background: #f8f5ff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
  border-radius: 10px;
  margin: 0 8px 8px 8px;
  padding: 8px 0;
  position: absolute;
  left: 80px;
  top: 0;
  min-width: 140px;
  z-index: 2000;
  display: block !important;
}

.el-aside.collapsed .content-wrapper {
  padding: 0;
}

.el-aside.collapsed .menu-link {
  padding: 10px 18px;
  justify-content: flex-start;
  font-size: 14px;
}

/* 只隐藏主菜单项的文字和箭头，不隐藏二级菜单内容 */
.el-aside.collapsed .section-header .section-title,
.el-aside.collapsed .section-header .expand-icon {
  display: none !important;
}

/* 保证主菜单图标可见 */
.el-aside.collapsed .section-header .section-icon {
  opacity: 1 !important;
}

/* 样式：收缩时二级菜单项只显示图标 */
.el-aside.collapsed .menu-link span {
  display: none !important;
}
.el-aside.collapsed .menu-link .menu-icon {
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  width: 100%;
  color: #8b5cf6;
}
.menu-link .menu-icon {
  margin-right: 10px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
}
.el-aside.collapsed .menu-link {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 修正 collapsed 时二级菜单原地显示为图标 */
.el-aside.collapsed .section-content {
  position: static !important;
  left: auto !important;
  top: auto !important;
  min-width: 0 !important;
  max-height: 100px !important;
  background: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
  display: block !important;
}
.el-aside.collapsed .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.el-aside.collapsed .menu-item {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.el-aside.collapsed .menu-link {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf7ff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
  padding: 0 !important;
}
.el-aside.collapsed .menu-link .menu-icon {
  margin: 0;
  font-size: 20px;
  color: #8b5cf6;
}
.el-aside.collapsed .menu-link span {
  display: none !important;
}

/* 添加状态提示样式 */
.status-notice {
  background: rgba(255, 229, 229, 0.5);
  border-radius: 12px;
  padding: 16px;
  margin: 15px 0;
  border: 1px dashed rgba(245, 108, 108, 0.5);
  text-align: center;
}

.notice-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.notice-icon {
  font-size: 18px;
}

.notice-icon.error {
  color: #f56c6c;
}

.notice-icon.warning {
  color: #e6a23c;
}

.notice-text {
  font-size: 14px;
  color: #f56c6c;
  font-weight: 500;
}

.el-aside.collapsed .notice-text {
  display: none;
}

.el-aside.collapsed .notice-content {
  justify-content: center;
}
</style>